<script setup>
import { ref } from "vue";
import { useField } from "vee-validate";
import {
  isRequiredUser,
  isRequiredAccount,
  isRequiredSms,
  isRequiredPassword1,
} from "./validation";
import { smsSend, registerSend } from "@/api/login";
const s = ref("发送验证码");
const disabled = ref(false);
const checkbox = ref(false);

const isRequieredPassword2 = (value) => {
  if (value && value == password.value) {
    return true;
  }
  return "两次输入的密码不一致";
};

const { value: userValue, errorMessage: errorUser } = useField(
  "fieldName",
  isRequiredUser
);
const { value: accountValue, errorMessage: errorAccount } = useField(
  "fieldName",
  isRequiredAccount
);
const { value: smsValue, errorMessage: errorSms } = useField(
  "fieldName",
  isRequiredSms
);
const { value: passwordValue, errorMessage: errorPassword } = useField(
  "fieldName",
  isRequiredPassword1
);
const { value: password2Value, errorMessage: errorPassword2 } = useField(
  "fieldName",
  isRequieredPassword2
);
const account = ref(accountValue);
const user = ref(userValue);
const password = ref(passwordValue);
const password2 = ref(password2Value);
const sms = ref(smsValue);
const sendSms = () => {
  if (!account.value) return ElMessage.error("请填写手机号");
  if (errorAccount.value) return ElMessage.error("手机号码格式错误");
  if (!disabled.value) {
    disabled.value = true;
    s.value = 60;
    let time = setInterval(() => {
      s.value = s.value -= 1;
      if (s.value == 0) {
        clearInterval(time);
        time = null;
        s.value = "发送验证码";
        disabled.value = false;
      }
    }, 1000);

    smsSend({ mobile: account.value }).then((res) => {
      ElMessage({
        message: res.msg,
        type: "success",
      });
    });
  }
};

const validation = () => {
  return (
    account.value &&
    user.value &&
    sms.value &&
    password.value &&
    password2.value &&
    !errorUser.value &&
    !errorAccount.value &&
    !errorPassword.value &&
    !errorPassword2.value &&
    !errorSms.value &&
    checkbox.value
  );
};

const valida = () => {
  user.value = user.value.replace(/[^a-zA-Z0-9]/g, "");
};

const registerReq = async () => {
  const obj = {
    account: user.value,
    mobile: account.value,
    code: sms.value,
    // code: '17007',
    password: password.value,
  };
  const data = await registerSend(obj);
  console.log(data);
  return data;
};

const register = () => {
  if (!user.value) return ElMessage.error("请填写用户名");
  if (!account.value) return ElMessage.error("请填写手机号");
  if (!sms.value) return ElMessage.error("请填写验证码");
  if (!password.value) return ElMessage.error("请填写密码");
  if (!password2.value) return ElMessage.error("请再次填写密码");
  if (errorUser.value)
    return ElMessage.error(
      "用户名格式错误，用户名必须为6至20位字母或字母和数字组合，首位必须为字母"
    );
  if (errorAccount.value) return ElMessage.error("手机号码格式错误");
  if (errorSms.value) return ElMessage.error("验证码格式错误");
  if (errorPassword.value)
    return ElMessage.error("密码格式错误，设置6至20位字母、数字和 . 组合");
  if (errorPassword2.value) return ElMessage.error("两次输入的密码不一致");
  if (!checkbox.value) return ElMessage.error("请勾选条款协议");

  registerReq();
};
</script>

<template>
  <div class="registered">
    <div class="registered-card">
      <div class="registered-card-title">新用户注册</div>
      <div class="registered-card-content">
        <div class="inputs">
          <el-input
            v-model="user"
            class="w-50 m-2"
            type="text"
            :clearable="true"
            @input="valida"
            placeholder="请输入用户名称"
          >
            <template #prefix>
              <i class="iconfont icon-jurassic_user"></i>
            </template>
          </el-input>
          <div class="err-info">{{ errorUser }}</div>
        </div>
        <div class="inputs">
          <el-input
            v-model.number="account"
            class="w-50 m-2"
            type="number"
            :clearable="true"
            placeholder="请输入手机号码"
          >
            <template #prefix>
              <i class="iconfont icon-jurassic_user"></i>
            </template>
          </el-input>
          <div class="err-info">{{ errorAccount }}</div>
        </div>
        <div class="inputs">
          <el-input
            v-model="sms"
            class="w-50 m-2"
            type="number"
            :clearable="true"
            placeholder="输入验证码"
          >
            <template #prefix>
              <i class="iconfont icon-duanxin"></i>
            </template>
            <template #suffix>
              <div
                class="send-sms"
                :style="{
                  backgroundColor:
                    !disabled && account && !errorAccount
                      ? '#1abc9c'
                      : '#bcf1e5',
                }"
                @click="sendSms"
              >
                {{ s }}
              </div>
            </template>
          </el-input>
          <div class="err-info">{{ errorSms }}</div>
        </div>
        <div class="inputs">
          <el-input
            v-model="password"
            class="w-50 m-2"
            type="password"
            :clearable="true"
            show-password
            placeholder="设置6至20位字母、数字、符号组合"
          >
            <template #prefix>
              <i class="iconfont icon-jurassic_user"></i>
            </template>
          </el-input>
          <div class="err-info">{{ errorPassword }}</div>
        </div>
        <div class="inputs">
          <el-input
            v-model="password2"
            class="w-50 m-2"
            type="password"
            :clearable="true"
            show-password
            placeholder="请再次输入密码"
          >
            <template #prefix>
              <i class="iconfont icon-jurassic_user"></i>
            </template>
          </el-input>
          <div class="err-info">{{ errorPassword2 }}</div>
        </div>

        <div class="checkbox">
          <input type="checkbox" v-model="checkbox" />
          <span
            >已阅读并同意《
            <router-link
              to="/registeredAndLogin/registered/terms"
              target="_blank"
              >用户服务协议</router-link
            >
            》</span
          >
        </div>

        <div
          class="registered-btn"
          @click="register"
          :style="{ backgroundColor: validation() ? '#1abc9c' : '#bcf1e5' }"
        >
          注册
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.registered {
  background-color: #f5f5f5;
  padding: 50px;

  .registered-card {
    box-sizing: border-box;
    width: 70%;
    height: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding: 0 30px;

    .registered-card-title {
      padding: 40px 0;
      font-size: 16px;
      color: #999;
    }

    .registered-card-content {
      padding: 0 35%;

      .checkbox {
        display: flex;
        align-items: center;
        input {
          background-color: #1abc9c;
        }

        a {
          color: dodgerblue;
        }
      }

      .registered-btn {
        height: 50px;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
        color: #fff;
        margin: 10px 0;
      }
    }

    .inputs {
      input {
        height: 50px;
        outline: none;
      }

      .el-input__wrapper.is-focus {
        box-shadow: rgb(220, 223, 230) 0px 0px 0px 1px inset;
      }

      .el-input__wrapper {
        border-radius: 0;
        // border
      }

      .send-sms {
        // border: 1px solid #999;
        font-size: 12px;
        padding: 0 4px;
        cursor: pointer;
        width: 70px;
        text-align: center;
        color: #fff;
      }

      .err-info {
        height: 20px;
        line-height: 20px;
        color: red;
      }
    }
  }
}
</style>
